<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">

            <h:form id="criarForm" styleClass="container_24 clearfix" >
                <h3 class="title">Coleta Dados</h3>
                <p:growl id="messages" showDetail="false" autoUpdate="true"  />

                <p:panel styleClass="grid_24 clearfix withoutBorder">
                    <h4 class="title">Quadra</h4>
                    <p:outputLabel value="Setor" styleClass="grid_3" for="setor" />
                    <p:inputText value="#{managerPesquisarColetaDados.setor.numero}" styleClass="grid_7" id="setor" />

                    <p:outputLabel value="Número" styleClass="grid_3" for="numero"/>
                    <p:inputText id="numero" styleClass="grid_7" value="#{managerPesquisarColetaDados.quadra.numero}" />

                    <br/>
                    <br/>   
                    <div class="clear"/>
                    <p:dataTable styleClass="grid_24" value="#{managerPesquisarColetaDados.situacaoColetaDadoses}" var="item">
                        <f:facet name="header">
                            Estado da Coleta
                        </f:facet>
                        <p:column style="width:16px">
                            <p:rowToggler />
                        </p:column>
                        <p:column headerText="#" width="20">
                            <p:commandButton update="@form" title="Excluir"
                                             oncomplete="dlg.show()"
                                             icon="ui-icon-trash">
                                <f:setPropertyActionListener target="#{managerPesquisarColetaDados.situacaoColetaDados}" value="#{item}" />
                            </p:commandButton>
                        </p:column>
                        <p:column headerText="Ação">
                            <h:outputText value="#{item.statusColetaDados eq null ? '-':item.statusColetaDados.nome}"/>
                        </p:column>

                        <p:column headerText="Data">
                            <h:outputText value="#{item.dataCriacao}">
                                <f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss" />
                            </h:outputText>
                        </p:column>
                        <p:column headerText="Agente">
                            <h:outputText value="#{item.usuarioAgente.nome}"/>
                        </p:column>
                        <p:rowExpansion>
                            <p:panel header="Detalhes" styleClass="container_24 clearfix">
                                <h:outputText value="#{item.observacao}" styleClass="grid_24" style="text-align: left;"/>
                                <div class="right grid_24" style="font-size: 12px; text-align: right;" >
                                    <h:outputText value="#{item.criadoPor.nome} "/>
                                    <div class="clear"/>
                                    <h:outputText value="#{item.dataCriacao}" >
                                        <f:convertDateTime pattern="dd/MM/yyy HH:mm:ss"/>
                                    </h:outputText>
                                </div>
                            </p:panel>

                        </p:rowExpansion>
                    </p:dataTable>
                </p:panel>
                <p:dialog id="modalDialog" header="Confirmação de remoção" widgetVar="dlg" modal="true" 
                          height="80" closable="false" resizable="false" closeOnEscape="true">
                    <h:outputText value="Tem certeza que deseja remover ?" />
                    <div class="buttonAction">
                        <p:commandButton value="Sim"
                                         actionListener="#{managerPesquisarColetaDados.remover()}"
                                         update="@form"
                                         icon="ui-icon-check"/>
                        <p:commandButton value="Não" icon="ui-icon-close"
                                         oncomplete="dlg.hide()" />
                    </div>
                </p:dialog>
            </h:form>
        </ui:define>
    </ui:composition>

</html>
